<template>
  <Modal v-model:visible="showModal" title="在读小学生性别数量" width="1000px">
    <div class="flex flex-col">
      <div class="flex flex-row items-center mb-1">
        <a-select
          v-model:value="searchParams.year"
          :options="utils.genSelectOptions('year')"
          @change="loadData"
        ></a-select>
      </div>
      <vxe-table
        :loading="true"
        v-bind="customTableStyle"
        :data="tableData"
        class="custom-vxe-table"
      >
        <vxe-column field="year" title="年份" width="80">
          <template #default="{ row }"> {{ row.year }}年 </template>
        </vxe-column>
        <vxe-column field="index" title="总人数排名" width="100"></vxe-column>
        <vxe-column field="grade" title="年级" minWidth="100"></vxe-column>
        <vxe-column field="boyCount" title="男孩数量(人)" width="120" :sortable="true">
          <template #default="{ row }">
            {{ row.boyCount || 0 }}
          </template>
        </vxe-column>
        <vxe-column field="girlCount" title="女孩数量(人)" width="120" :sortable="true">
          <template #default="{ row }">
            {{ row.girlCount || 0 }}
          </template>
        </vxe-column>
        <vxe-column field="totalCount" title="总人数(人)" width="120" :sortable="true">
          <template #default="{ row }">
            {{ row.totalCount || 0 }}
          </template>
        </vxe-column>
        <vxe-column field="boyPercentage" title="男孩占比" width="120" :sortable="true">
          <template #default="{ row }"> {{ row.boyPercentage || 0 }}% </template>
        </vxe-column>
        <vxe-column field="girlPercentage" title="女孩占比" width="120" :sortable="true">
          <template #default="{ row }"> {{ row.girlPercentage || 0 }}% </template>
        </vxe-column>
      </vxe-table>
    </div>
  </Modal>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Modal from '@/components/modal.vue'
import { Apis } from '@/api'
import { message } from 'ant-design-vue'
import * as utils from '../../utils'

const isLoading = ref(false)

const showModal = ref(false)

const searchParams = ref({
  year: '',
  quarter: '',
})
const tableData = ref<any[]>([])

// 统一管理表格样式
const customTableStyle = {
  ...utils.customTableStyle,
  footerMethod: ({ columns, data }) => {
    const footerData = [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计'
        }
        if (['boyCount', 'girlCount', 'totalCount'].includes(column.field)) {
          return (utils.sumNum(data, column.field) || '') + '人'
        }

        return ''
      }),
    ]
    return footerData
  },
}

function loadData() {
  isLoading.value = true
  Apis.szbt.pupil
    .get_getPupilStatisticsChartData({
      params: {
        year: searchParams.value.year,
      },
    })
    .then((res) => {
      const order = ['六年级', '五年级', '四年级', '三年级', '二年级', '一年级']
      tableData.value = (res.barData || [])
        .sort((a: any, b: any) => order.indexOf(a.grade) - order.indexOf(b.grade))
        .map((item: any, index: number) => {
          // item.index = index + 1
          const totalCount = (item.boyCount || 0) + (item.girlCount || 0)
          item.totalCount = totalCount
          item.boyPercentage = totalCount
            ? (((item.boyCount || 0) / totalCount) * 100).toFixed(2)
            : 0
          item.girlPercentage = totalCount
            ? (((item.girlCount || 0) / totalCount) * 100).toFixed(2)
            : 0
          return item
        })

      // 复制并排序，记录每个元素的排名
      const sortedItems = [...res.barData].sort((a, b) => b.totalCount - a.totalCount)
      const rankMap = new Map()
      sortedItems.forEach((item, index) => {
        rankMap.set(item.grade, index + 1)
      })

      // 为原数组添加排名索引
      res.barData.forEach((item) => {
        item.index = rankMap.get(item.grade)
      })
    })
    .catch((err) => {
      message.error('获取数据失败')
    })
    .finally(() => {
      isLoading.value = false
    })
}

defineExpose({
  setData: (data: any) => {
    const { params } = data
    searchParams.value = params
    // tableData.value = data;
  },
  open: () => {
    showModal.value = true
    loadData()
  },
})
</script>

<style lang="scss" src="@/styles/custom-vxe-table.scss"></style>
